<template>
	<div class="base_card_title" :class="border ? 'van-hairline--bottom' : ''">
		<div class="base_card_title_label">
			<p class="title" :class="titleClass">
				<slot v-if="$slots.title" name="title"></slot>
				<span v-else>{{ title }}</span>
			</p>
			<p class="label" v-if="label">{{ label }}</p>
		</div>
		<div class="base_card_title_action">
			<slot></slot>
			<van-icon v-if="arrow" name="arrow" />
		</div>
	</div>
</template>

<script setup>
defineProps({
	title: {
		type: String,
		default: ''
	},
	label: {
		type: String,
		default: ''
	},
	titleClass: String,
	border: Boolean,
	arrow: Boolean
})
</script>

<style lang="less" scoped>
@import "../../less/config/var";
.base_card_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	&_label {
		flex: 2;
		.title {
			margin: 0;
			font-weight: 500;
			font-size: 17px;
		}
		.label {
			margin: 8px 0 0;
			font-size: 14px;
			color: #8F959E;
		}
	}
	&_action {
		flex: 1;
		text-align: right;
		font-size: 12px;
		color : @color-gray;
	}
}
</style>
